<template>
<div class="index">
  <div class="searchBar" v-show="searchBarFixed">
    <div class="logo-s">
        <!-- <div class="logo">
          <img src="../../assets/images/logo.png">
        </div> -->
        <h1 class="hvr-bounce-in">
          <span>WebClub</span>
        </h1>
    </div>
    <ul class="scrollTop">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
        <el-menu-item :index="index + 1" v-for="(item,index) in cateList">{{item.catename}}</el-menu-item>
      </el-menu>
    </ul>
  </div>
  <el-row :gutter="10">
    <el-col :md="24" :lg="24" :xl="24" class="index-home"> 
      <div>
        <div id="home">
            <div class="nav-title" id="searchBar">
              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                <el-menu-item :index="index + 1" v-for="(item,index) in cateList">{{item.catename}}</el-menu-item>
              </el-menu>
            </div>
            <div id="list" class="infinite-list"  v-infinite-scroll="load">
              <article   class="excerpt excerpt-1 infinite-list-item" style="" v-for="(item,index) in articleList">
                <div style="width: 80%">
                  <header @click="goDetail(index)">
                    <a class="cat" href="#" title="" >{{item.keywords}}<i></i></a>
                    <h2>
                      <a>
                        {{item.title}}
                      </a>
                    </h2>
                  </header>
                  <span class="meta">
                    <time class="time">
                      <img src="../../assets/images/time.png">
                    {{item.create_time | formatTime}}
                    </time>
                    <a class="comment" target="_blank" >
                      <img src="../../assets/images/browse.png">
                    阅读({{item.click}})</a>
                  </span>
                  <p style="margin-top: 10px;font-size: 14px">
                    <a :href="item.url" style="color:#8590a6;padding-right:40px"><i style="padding-right:5px" class="el-icon-edit"></i>来源：{{item.from}} </a>
                    <a :href="item.url" style="color:#8590a6;"><i style="padding-right:5px" class="el-icon-share"></i>分享 </a>
                  </p>
                  <!-- <p class="note" >{{item.desc}}</p> -->
                </div>
                <a class="focus"  v-if="item.image_url != ''">
                  <img class="thumb" :src="item.image_url" alt=""  style="display: inline;">
                </a>
              </article>
            </div>
            <div class="look_more" v-loading="loading">
              <p v-if="loading">加载中...</p>
              <p v-else>—— 没有更多了 ——</p>
            </div>
        </div>
      </div>
      </el-col>
  </el-row>
</div>
</template>

<script>
  export default {
    data () {
      return {
        page:1,
        scrollTop:0,
        Maxsize:0,
        active:0,
        status:"",
        loading: false,
        size:7,
        activeIndex: '1',
        searchBarFixed:'',
        cateList:[],
        articleList: [
        ],
      }
    },
    mounted () {
      // this.getDatas()
      this.getCate()
      window.addEventListener('scroll', this.handleScroll)
    },
    destroyed () {
      window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
      handleScroll () {
         let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
         if(scrollTop > this.scrollTop){
           this.scrollTop = scrollTop
           let offsetTop = document.querySelector('#searchBar').offsetTop + 55
           scrollTop > offsetTop ? this.searchBarFixed = true : this.searchBarFixed = false
         }else{
           this.searchBarFixed = false
           this.scrollTop = scrollTop
         }
      },
      // getDatas() {
      //   let params = {

      //   };
      //   this.$api.getNews(params)
      //    .then(res => {
      //      console.log(res)
      //       this.articleList = res.data.slice(0,this.size)
      //    })
      // },
      getCate() {
        this.$api.getNewscate()
         .then(res => {
           console.log(res)
           this.cateList = res.data.data
         })
      },
      load () {
        this.loading = true
        let arr = this.articleList
        let params = {
          page: this.page,
          size: this.size,
        };
        this.$api.getNews(params)
         .then(res => {
           console.log(res)
            this.Maxsize = this.size * this.page
            if(this.Maxsize <=res.data.total){
              this.page = this.page + 1
              this.articleList = arr.concat(res.data.data)
            }else{
              this.$message({
                message: '没有了',
                type: 'warning'
              });
              this.loading = false
            }
         })
      },
      // 查看文章详情
      goDetail(index) {
        console.log(index);
        let articleId = this.articleList[index].id;
        this.$router.push({
          path: '/newsdetails',
          query: {
            articleId: articleId,
          }
        });
      },
    },
    components: {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>

@import './index.less';

</style>
